<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
    <div class="app">
        <input type="text" v-model="msg" class="txt">
    </div>
    <input type="button" id="del" value="卸载组件">
</body>
<script src="../vue.global.js"></script>
<script>
    const app = Vue.createApp({
        data(){
            return {
                msg: "hello",
            }
        },
        beforeCreate() {
            console.log(this.msg);
            console.log("组件创建之前，添加各种拦截守卫");
        },
        created() {
            console.log(this.msg);
            console.log("组件创建之后，请求后端数据");
        },
        beforeMount() {
            console.log(document.querySelector(".txt"));
            console.log("组件挂载之前");
        },
        mounted() {
            console.log(document.querySelector(".txt"));
            console.log("组件挂载之后，可以进行DOM操作了");
        },
        beforeUpdate() {
            console.log("数据更新引起的DOM更新之前，保留或记录老数据");
        },
        updated() {
            console.log("数据更新引起的DOM更新之后，使用更新之后的数据");
        },
        beforeUnmount() {
            console.log("组件卸载之前，手动注销一些异步操作，清除计时器等等");
        },
        unmounted() {
            console.log("组件卸载之后");
        }
    });
    app.mount(".app");


    del.onclick = function(){
        app.unmount();
    }

</script>
</html>